import React from 'react';
import { SearchBar, Button, WhiteSpace, WingBlank, Icon, Menu} from 'weaver-mobile';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom';

const data = [
  {
    value: '1',
    label: 'Food',
    children: [
      {
        label: 'All Foods',
        value: '1',
        disabled: false,
      },
      {
        label: 'Chinese Food',
        value: '2',
      }, {
        label: 'Hot Pot',
        value: '3',
      }, {
        label: 'Buffet',
        value: '4',
      }, {
        label: 'Fast Food',
        value: '5',
      }, {
        label: 'Snack',
        value: '6',
      }, {
        label: 'Bread',
        value: '7',
      }, {
        label: 'Fruit',
        value: '8',
      }, {
        label: 'Noodle',
        value: '9',
      }, {
        label: 'Leisure Food',
        value: '10',
      }],
  }, {
    value: '2',
    label: 'Supermarket',
    children: [
      {
        label: 'All Supermarkets',
        value: '1',
      }, {
        label: 'Supermarket',
        value: '2',
        disabled: true,
      }, {
        label: 'C-Store',
        value: '3',
      }, {
        label: 'Personal Care',
        value: '4',
      }],
  },
  {
    value: '3',
    label: 'Extra',
    isLeaf: true,
    children: [
      {
        label: 'you can not see',
        value: '1',
      },
    ],
  },
];
export default class MyBlog extends React.Component {


  state = {
    value: '美食',
    show: false,
  };
  componentDidMount() {
    this.autoFocusInst.focus();
  }
  onChange= (value) => {
    this.setState({ value });
  };
  clear = () => {
    this.setState({ value: '' });
  };
  handleClick = () => {
    this.manualFocusInst.focus();
  }
  render() {
    const { show } = this.state;
    const menuEl = (
      <Menu
        className="select-menu"
        data={data}
        height={document.documentElement.clientHeight * 0.6}
      />
    );
    return (<div className={show ? 'menu-active' : ''}>
      <WingBlank><div className="sub-title">Normal</div></WingBlank>
      <SearchBar placeholder="Search" maxLength={8} />
      <WhiteSpace />
      <WingBlank><div className="sub-title">Show select button</div></WingBlank>
      <SearchBar
        className="search-select"
        placeholder="Search"
        showSelectButton
        selectText="类型"
        onSelectButtonClick={() => this.setState({ show: !this.state.show })}
      />
      {show ? menuEl : null}
      {show ? <div className="menu-mask" onClick={() => this.setState({ show: false })} /> : null}
      <WingBlank><div className="sub-title">Show extra button</div></WingBlank>
      <SearchBar
        className="search-select"
        placeholder="Search"
        showExtraButton
        extraButton={[
          { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> },
          { key: 'selected', show: <Icon key="filter-o-hot" type="filter-o-hot" /> },
          { key: 'drop', show: <Icon key="ellipsis" type="ellipsis" /> },
        ]}
        onExtraButtonClick={(key) => { console.log('onExtraButtonClick', key); }}
      />
      <WingBlank><div className="sub-title">AutoFocus when enter page</div></WingBlank>
      <SearchBar placeholder="自动获取光标" ref={ref => this.autoFocusInst = ref} showClearButton={false} />
      <WhiteSpace />
      <WingBlank><div className="sub-title">Focus by operation</div></WingBlank>
      <SearchBar
        placeholder="手动获取获取光标"
        ref={ref => this.manualFocusInst = ref}
      />
      <WhiteSpace />
      <WingBlank>
        <Button
          onClick={this.handleClick}
        >click to focus</Button>
      </WingBlank>
      <WhiteSpace />
      <WingBlank><div className="sub-title">Show cancel button</div></WingBlank>
      <SearchBar
        value={this.state.value}
        placeholder="Search"
        onSubmit={value => console.log(value, 'onSubmit')}
        onClear={value => console.log(value, 'onClear')}
        onFocus={() => console.log('onFocus')}
        onBlur={() => console.log('onBlur')}
        onCancel={() => console.log('onCancel')}
        showCancelButton
        onChange={this.onChange}
      />
    </div>);
  }
}